<template>
  <div class="no-device">
    <div style="padding-top: 90px">
      <h1>请使用数据线连接您的设备</h1>
    </div>
    <div style="color: #999999">连接设备，设置操作后可自动操作设备</div>
    <div>
      <img src="../assets/no-device.png" />
    </div>
    <div style="margin-top: 30px">
      <a-button
        type="primary"
        size="large"
        style="padding: 0 35px"
        @click="getDevices"
      >
        连接设备
      </a-button>
    </div>
  </div>
</template>

<script>
import * as adb from "@/untils/adb";

export default {
  name: "NoDevice",
  props: {},
  methods: {
    async getDevices() {
      let device = [];
      let devices = await adb.devices();
      devices = devices.split(/[(\r\n)\r\n]+/).filter((item) => !!item);
      devices.shift();
      devices.map((item) => {
        device.push(item.split(/\s/).shift());
      });
      device.length && this.$emit("device", device);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
